<template>
  <free-app :bgType="'image'" :navbar="{
    title: '小店消息'
  }">
    <view class="   px-3 mt-174rpx mx-24rpx gap-3 flex flex-col">
      <view class=" gap-32rpx p-3   flex flex-col  py-4 shadow1">
        <view class="text-28rpx font-500">用户下单通知</view>

        <view v-for="(item, index) in order" :key="index" class="justify-between flex">
          <view class="text-3 font-400">{{ item.project }}
          </view>
          <view class="text-3 font-500">{{ item.data }}
          </view>
        </view>
      </view>
      <view class=" gap-32rpx   flex flex-col py-4 p-3 shadow1">
        <view class="text-28rpx font-500">用户下单通知</view>

        <view v-for="(item, index) in order" :key="index" class="justify-between flex">
          <view class="text-3">{{ item.project }}
          </view>
          <view class="text-3 font-500">{{ item.data }}
          </view>
        </view>
      </view>
      <view class=" gap-32rpx   flex flex-col py-4 p-3 shadow1">
        <view class="text-28rpx font-500">用户下单通知</view>

        <view v-for="(item, index) in order" :key="index" class="justify-between flex">
          <view class="text-3">{{ item.project }}
          </view>
          <view class="text-3 font-500">{{ item.data }}
          </view>
        </view>
      </view>
    </view>
  </free-app>

</template>

<script setup>
import { ref } from 'vue'
const order = ref([
  {
    index: 0,
    project: "付款时间",
    data: "2025-03-18 17:28"
  },
  {
    index: 1,
    project: "订单编号",
    data: "S133-250318-0007"
  },
  {
    index: 2,
    project: "下单用户",
    data: "永丰手机维修中心8"
  },
  {
    index: 3,
    project: "联系方式",
    data: " 13063882696"
  },
  {
    index: 3,
    project: "订单金额",
    data: "￥75."
  }
])
</script>

<style lang="scss"></style>